<template>
	<div
		:class="[
			'app-editor-container',
			'app-mob-data-picker-view',
			`app-mob-data-picker-view-${name}`,
		]"
	>
		<div class="data-picker-view__input" @click="openPopup">
			<div class="data-picker-view__input__text">
				<span>{{ curValue }}</span>
			</div>
			<div class="data-picker-view__input__icon">
				<van-icon
					class="icon__clear"
					name="clear"
					v-if="curValue && !disabled"
					@click="clear"
				/>
				<van-icon class="icon__dropdown" name="arrow-down" v-else />
			</div>
		</div>
		<van-popup
			v-model:show="isShow"
			round
			teleport="body"
			position="bottom"
			class="data-picker-view__popup"
		>
			<div class="data-picker-view__popup__container">
				<div class="data-picker-view__popup__header">
					<div @click="cancel" class="cancel">
						{{ $t('common.generic.onCancel', '取消') }}
					</div>
					<div @click="confirm" class="confirm">
						{{ $t('common.generic.okText', '确定') }}
					</div>
				</div>
				<div class="data-picker-view__popup__result-list">
					<van-list>
						<van-cell
							v-for="item in items"
							:class="{
								'app-mob-data-picker-popup__isselect': isSelect(
									item[props.deKeyField]
								),
							}"
							:key="item[props.deKeyField]"
							:title="item[props.deMajorField]"
							@click="onSelect(item[props.deKeyField])"
						/>
					</van-list>
				</div>
			</div>
		</van-popup>
	</div>
</template>
<script lang="ts" setup>
import { Ref } from 'vue';
import { deepCopy, IEvent } from '@/core';
import { dataPickerViewProps } from './data-picker-view';
import { handleEditorNavParams } from '@/hooks/use-editor';
interface EditorEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const props = defineProps(dataPickerViewProps);
const emit = defineEmits<EditorEmit>();
const { navContext, navViewParam } = handleEditorNavParams(props);
const items: Ref<any[]> = ref([]);
const curValue: Ref<any> = ref();
const isShow = ref(false);
const selectValue = ref();
//监听当前表单项值
watch(
	() => props.value,
	(newVal: any, oldVal: any) => {
		if (!newVal) {
			curValue.value = null;
		} else {
			const data = items.value.find((item: any) => {
				return item.value === newVal;
			});
			curValue.value = data[props.deMajorField];
		}
	},
	{
		immediate: true,
	}
);

watch(
	() => isShow.value,
	(newVal: any, oldVal: any) => {
		if (newVal) {
			selectValue.value = props.value;
		}
	}
);

//打开弹窗
const openPopup = () => {
	if (!props.disabled) {
		isShow.value = true;
		onSearch();
	}
};
//点击取消，关闭弹窗
const cancel = () => {
	isShow.value = false;
	selectValue.value = null;
};
//点击确定，返回选择数据，关闭弹窗
const confirm = () => {
	doEditorEmit(selectValue.value);
	isShow.value = false;
};

//搜索数据
const onSearch = async (value: string = '') => {
	if (props.disabled) {
		return;
	}
	const _navContext = deepCopy(navContext);
	const _navViewParam = deepCopy(navViewParam);
	Object.assign(_navViewParam, { query: value, size: 1000 });
	const requestException: string = App.ts(
		'common.generic.requestexception',
		'请求异常'
	);
	if (!props.service) {
		console.warn(App.ts('common.generic.noservice', '服务不存在'));
	} else if (!props.acParams) {
		console.warn(App.ts('common.generic.miss', '参数不存在'));
	} else {
		const { serviceName, interfaceName } = props.acParams;
		const { deKeyField, deCodeName } = props;
		try {
			const response = await props.service.getItems(
				serviceName,
				interfaceName,
				_navContext,
				_navViewParam,
				deKeyField,
				deCodeName
			);
			if (!response) {
				console.warn(App.ts('common.generic.loadfail', '加载数据失败'));
				return;
			} else {
				items.value = response;
			}
		} catch (error: any) {
			console.warn(
				error && error.message ? error.message : `代码表${requestException}`
			);
		}
	}
};

//判断选中
const isSelect = (value: any) => {
	return selectValue.value === value ? true : false;
};

//点击选项
const onSelect = (value: any) => {
	selectValue.value = value;
};

//统一抛值
const doEditorEmit = (value: any) => {
	emit('component-action', {
		name: `${props.name}`,
		action: 'valueChange',
		data: value,
	});
};

//点击清除按钮
const clear = (event: any) => {
	event.preventDefault();
	event.stopPropagation();
	doEditorEmit(null);
};
</script>
